<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{::style},~{})">
    <title>主页-新闻展示</title>
    <style>
        .layui-carousel img{
            background-size:cover;
            width:100%;
            height: 500px;
        }
        .middle{
            display: flex;
            width: 100%;
            padding: 0 2% 2%;
            flex-direction: row;
            align-items: flex-start;
            min-height: 300px;
        }
        .middle-left,.middle-right{
            width: 49%;
            margin: 1%;
        }
        .title{
            font-size: 20px;
        }
        .item-score{
            float: right;
        }
        .my-more{
            float: right;
            cursor: pointer;
        }
        input::-webkit-input-placeholder {
            color: #aab2bd;
            font-size: 20px;
            text-align: center;
        }
        .middle-search input{
            width: 60%;
            height: 50px;
            border: 2px solid #491948;
            /*border: 2px solid #e38d13;*/
            border-radius: 20px;
        }
        .middle-search input,i{
            height: 50px;
        }
    </style>
</head>
<body>

<!--顶部导航栏导入-->
<div th:replace="home/public/top-menu::top-menu"></div>

<div id="indexApp" v-cloak>
    <!-- -->
    <div class="middle" style="background-image: url(/static/home/images/bj.jpg)">
        <div class="middle-left">
            <div class="title list-group-item active" style="background-color: #708090">
                <span>全部新闻</span>
                <span  class="my-more" @click="moreList()">更多>></span>
            </div>
            <div v-for="item in hotNewsList" class=" right-item list-group-item">
                <a :href="'/home/news/homeDetail/'+item.id" style="color: #000000">
                    <span>{{item.title.length>50?item.title.substring(0,50)+'...':item.title}}</span>
                    <span class="item-score">{{item.createTime}}</span>
                </a>
            </div>
        </div>
        <div class="middle-right">
            <div  class="title list-group-item active" style="background-color: #708090">
                <span>系统特色</span>
                <span  class="my-more" @click="moreFeatureList()">更多>></span>
            </div>
            <div v-for="item in featureList" class="right-item list-group-item" >
                <a :href="'/home/news/homeDetail/'+item.id" style="color: black">
                    <span>{{item.title.length>50?item.title.substring(0,50)+'...':item.title}}</span>
                    <span class="item-score">{{item.createTime}}</span>
                </a>
            </div>
        </div>
    </div>

    <div class="middle" style="background-image: url(/static/home/images/bj.jpg)">
        <div class="middle-left">
            <div class="title list-group-item active" style="background-color: #708090">
                <span>猜你喜欢</span>
                <span  class="my-more" @click="moreRecommendList()">更多>></span>
            </div>
            <div v-for="item in recommendList" class=" right-item list-group-item">
                <a :href="'/home/news/homeDetail/'+item.id" style="color: black">
                    <span>{{item.title.length>50?item.title.substring(0,50)+'...':item.title}}</span>
                    <span class="item-score">{{item.createTime}}</span>
                </a>
            </div>
        </div>
        <div class="middle-right">
            <div  class="title list-group-item active" style="background-color: #708090">
                <span>热点新闻</span>
                <span  class="my-more" @click="moreList()">更多>></span>
            </div>
            <div  v-for="item in attentionList" class="right-item list-group-item" >
                <a :href="'/home/news/homeDetail/'+item.id" style="color: black">
                    <span>{{item.title.length>50?item.title.substring(0,50)+'...':item.title}}</span>
                    <span class="item-score">{{item.createTime}}</span>
                </a>
            </div>
        </div>
    </div>

</div>

<!-- 底部导航栏 start-->
<footer th:replace="home/public/footer::footer"></footer>
<!-- 底部导航栏end -->

<script th:src="@{/static/common/plugs/vue/vue.js}"></script>

<script type="text/javascript">

    <!--轮播图参数设置-->
    layui.use(['carousel'], function () {
        var carousel = layui.carousel;
        //建造实例
        var ins = carousel.render({
            elem: '#test3'
            , width: '100%' //设置容器宽度
            , height: '500px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        //重置轮播
        ins.reload({
            elem: '#test3'
            , width: '100%' //设置容器宽度
            , height: '500px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    function getSwiperList() {
        $.get("/home/swiper/list/1/1000",function (res) {
            indexApp.$data.swiperList = res.data.swiperList;
        });
    }

    var indexApp = new Vue({
        el: "#indexApp",
        data:{
            hotNewsList: ""
            ,attentionList: ""
            ,featureList: ""
            ,recommendList: ""
        },
        created: function () {
        },
        methods:{
            moreList:function () {
                window.location.href="/home/news/homeListPage/";
            },
            moreFeatureList:function () {
                window.location.href="/home/news/featureListPage/";
            },
            moreRecommendList:function () {
                window.location.href="/home/news/recommendListPage/";
            },

            getHotNewsList: function () {
                $.get("/home/news/hotlist/1/10",function (res) {
                    indexApp.$data.hotNewsList = res.data.hotNewsList;
                });
            },
            getFeatureList: function () {
                $.get("/home/news/featureList/1/10?categoryId=1",function (res) {
                    indexApp.$data.featureList = res.data.featureList;
                });
            },
            getRecommendList: function () {
                $.get("/home/news/recommendList/1/10",function (res) {
                    indexApp.$data.recommendList = res.data.recommendList;
                });
            },
            getAttentionList: function () {
                $.get("/home/news/attentionList/1/10",function (res) {
                    indexApp.$data.attentionList = res.data.attentionList;
                });
            }
        }
    });
    function goPage(ele) {
        var url = ele.getAttribute("data-url");
        console.log("轮播图详情地址：", url);
    }
    indexApp.getHotNewsList();
    indexApp.getRecommendList();
    indexApp.getAttentionList();
    indexApp.getFeatureList();
</script>
</body>
</html>
